<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery"></a-form>
    </div>

    <!-- 操作按钮区域 -->
   
    <div class="table-operator" style="border-top: 5px">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
    
        <a-row :gutter="24">
          <a-col :md="20" :sm="20">
            <a-form-item
              label="关键词"
              style="width:100%"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input placeholder="请输入关键词，以,隔开，可以输入多个关键词" v-model="keywordStr"/>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="4">
            <a-form-item>
              <a-button type="primary" icon="plus" @click="keywordOk">保存关键字</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div>
      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a-popconfirm title="确认手动执行?" @confirm="excuteCrawler(record)" okText="Yes" cancelText="No">
            <a href="#" style="margin-right: 10px">手动执行</a>
          </a-popconfirm>
        </span>

        <span slot="executeStateAction" slot-scope="text, record"><!-- 执行记录 -->
          <a href="#" style="margin-right: 10px" @click="goShowLog(record)"><a-icon type="eye" theme="filled"/></a>
        </span>

        <template slot="stateSlot" slot-scope="text, record, index">
          <div class="flex">
            <!--              <div v-if="record.executeState == 0">执行</div>-->
            <!--              <div v-if="record.executeState == 1">不执行</div>-->
            <a-switch v-model="record.executeState2" @change="changeCrawler(record)"/>
          </div>
        </template>
      </a-table>
    </div>

    <a-modal
      :width="800"
      :visible="showLog"
      @ok="closeLog"
      :confirmLoading="confirmLoading"
      @cancel="closeLog"
      cancelText="关闭">
      <a-card :bordered="false" title="执行日志">
        <!-- <detail-list v-for="(str,index) of logList" :key="index" size="small" col="1" class="detail-layout">
          <div>执行时间：{{ str.createTime }}
            <a-divider type="vertical"/>
            获取数据：{{ str.num }}
          </div>
        </detail-list> -->

      </a-card>
    </a-modal>
  </a-card>

</template>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import {deleteAction, getAction, httpAction} from '@/api/manage'

  export default {
    name: 'PythonList',
    mixins: [JeecgListMixin],
    components: {
      JInput
    },
    data() {
      return {
        description: '爬虫管理页面',
        queryParam: {},
        recycleBinVisible: false,
        keywordShow: false,
        keywordConfirmLoading: false,
        keywordStr: '',

        ruleShow: false,
        ruleConfirmLoading: false,

        forwordStr: 0,
        remarkStr: 0,
        readStr: 0,
        timeStr: 0,
        showLog: false,
        logList: [],
        columns: [
          /* {
      title: '#',
      dataIndex: '',
      key:'rowIndex',
      width:60,
      align:"center",
      customRender:function (t,r,index) {
        return parseInt(index)+1;
      }
    }, */
          {
            title: '标题',
            align: 'center',
            dataIndex: 'title',
            width: 80
          }, {
            title: '链接',
            align: 'center',
            dataIndex: 'link',
            customRender:function (text) {
                return <div width='100px'>
                <a href={text} target="_blank" >跳转新闻链接</a></div>;
            },
            width: 80
          },
          {
            title: '时间',
            align: 'center',
            dataIndex: 'time',
            width: 80
          },
          {
            title: '目录',
            align: 'center',
            dataIndex: 'ml',
            width: 80
          },
          {
            title: '来源',
            align: 'center',
            dataIndex: 'source',
            width: 80
          },
          {
            title: '作者',
            align: 'center',
            dataIndex: 'author',
            width: 80
          },
          // {
          //   title: '链接地址',
          //   align: "center",
          //   width: 150,
          //   dataIndex: 'websiteUrl',
          // },
          // {
          //   title: '抓去周期',
          //   align: "center",
          //   width: 80,
          //     dataIndex: 'grabCycle',
          //
          // },

          // {
          //     title: '执行',
          //     align: 'center',
          //     width: 80,
          //     dataIndex: 'executeState',
          //     scopedSlots: { customRender: 'stateSlot' }
          // },
          // {
          //     title: '执行记录',
          //     align: 'center',
          //     width: 80,
          //     dataIndex: 'executeStateAction',
          //     scopedSlots: { customRender: 'executeStateAction' }
          // },
          // {
          //   title: '手动执行',
          //   dataIndex: 'action',
          //   scopedSlots: {customRender: 'action'},
          //   align: 'center',
          //   width: 170
          // }
        ],
        url: {
          list: '/crawler/newCrawlerInfo/list',
          delete: '/crawler/cueCrawlerInfo/delete',
          initCrawlerData: '/crawler/newCrawlerInfo/initCrawlerData',
          keywordOk: '/crawler/newCrawlerInfo/addKeyword',
          ruleOk: '/crawler/cueCrawlerInfo/ruleOk',
          changeCrawler: '/crawler/cueCrawlerInfo/changeCrawlerState',
          excuteCrawler: '/crawler/cueCrawlerInfo/excuteCrawler',
          querySpiderLog: '/crawler/cueCrawlerInfo/querySpiderLog'
        },
        labelCol: {
          span: 2
        },
        wrapperCol: {
          span: 20
        }
      }
    },
    computed: {},

    created() {
      // 初始化查询关键词，和规则
      this.initCrawlerData()
    },
    mounted(){
      this.initCrawlerData()

    },
    methods: {
      changeCrawler: function (record) {
        getAction(this.url.changeCrawler, record).then(res => {
          if (res.success) {
            this.loadData()
          }
        })
      },

      excuteCrawler: function (record) {
        getAction(this.url.excuteCrawler, record).then(res => {
          if (res.success) {
            if (record.executeState == 1) {
              this.$message.warning('该爬虫状态为不执行，请修改')
            } else {
              this.$message.success('爬虫已经异步执行，请稍后在线索管理中查看')
            }
          }
        })
      },

      goKeyword() {
        this.keywordShow = true
      },

      keywordOk() {
        // 执行关键词设置
        var that = this
        var param = Object.assign({}, {keyword: this.keywordStr})

        getAction(this.url.keywordOk, param).then(res => {
          if (res.success) {
            that.initCrawlerData()
            that.keywordShow = false
            that.loadData()
          }
        })
      },

      keywordCancel() {
        this.keywordShow = false
      },

      goRule() {
        this.ruleShow = true
      },

      ruleOk() {
        // 执行关键词设置
        var that = this
        var param = Object.assign(
          {},
          {forwardStr: this.forwordStr, remarkStr: this.remarkStr, readStr: this.readStr, timeStr: this.timeStr}
        )

        getAction(this.url.ruleOk, param).then(res => {
          if (res.success) {
            that.initCrawlerData()
            that.ruleShow = false
            that.loadData()
          }
        })
      },

      ruleCancel() {
        this.ruleShow = false
      },

      initCrawlerData() {
        var that = this
        let httpurl = that.url.initCrawlerData
        let method = 'get'
        httpAction(httpurl, {}, method).then(res => {
          if (res.success) {
            that.keywordStr = res.result.keyword
           
          }
        })
      },

      goShowLog(record) {
        // 获取日志数据
        var that = this
        getAction(this.url.querySpiderLog, record).then(res => {
          if (res.success) {
            that.logList = res.result
            that.showLog = true
          } else {
            that.$message.error(res.message)
          }
        })
      },
      closeLog() {
        this.showLog = false
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';

  .ant-row {
    background-color: #fff;
    margin-bottom: 5px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 5px;
  }

  .ant-col {
    padding-bottom: 20px;
    padding-top: 20px;
  }

  .ant-input-number {
    margin-bottom: 0 !important;
  }

  .ant-form-inline .ant-form-item {
    margin-bottom: 0 !important;
  }

  .table-operator .ant-btn {
    margin: 0 !important;
  }

  .flex {
    display: flex;
    justify-content: center;
  }

  .flex div:first-child {
    width: 60px;
    text-align: right;
    margin-right: 12px;
  }
</style>
